*{ padding: 0; margin: 0;}
em{ font-style: normal;}
a{ text-decoration: none;}

.ai_btn_blue{
	background: #2c9ff7;
	background-image: -moz-linear-gradient( 90deg, rgb(25,145,235) 0%, rgb(46,161,248) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(25,145,235) 0%, rgb(46,161,248) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(25,145,235) 0%, rgb(46,161,248) 100%);
}
.ai_btn_green{
	background: #24b00e;
	background-image: -moz-linear-gradient( 90deg, rgb(36,176,13) 0%, rgb(39,178,16) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(36,176,13) 0%, rgb(39,178,16) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(36,176,13) 0%, rgb(39,178,16) 100%);
}

.ai_match_cantianer{ position: relative; width: 100%; height: 690px; background: #1b2431; overflow: hidden;}
.ai_match_bg{ 
	position: relative;
	width: 100%;
	height: 690px;
	background:url(../images/index_header_bg.jpg) no-repeat center center;
}

.ai_match_tab_cantainer{position: absolute; top: 60px; left: 50%; margin-left: -595px; width: 1190px; height: 60px; font-size: 0; z-index: 1;}
.ai_match_tab_cantainer span{ display: inline-block; width: 595px; height: 100%; font-size: 18px; border-bottom: 1px solid #013d6c; line-height: 60px; color: #fff; text-align: center; vertical-align: top; cursor: pointer;}
.ai_match_tab_cantainer span.active{ background: url(../images/tab.png) no-repeat; border: 0 none; cursor: default;}
.ai_match_tab_cantainer span:last-child.active{ background-position: 0 -60px;}
.ai_match_tab_cantainer span em{ font-size: 12px; margin-left: 10px;}

.ai_match{ position: absolute; top: 120px; left: 50%; margin-left: -595px; width: 1188px; height: 509px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: rgba(1, 51, 90, 0.529); border: 1px solid #013d6c; border-top: 0 none; box-shadow: 0px 0px 35px 0px rgba(1, 61, 108, 0.004); overflow: hidden;}


.ai_machine_cantainer{ position: relative; display: inline-block; width: 454px; height: 430px; margin-top: 58px;}
.ai_machine{ width: 176px; height: 241px; margin: 0 auto; background: url(../images/0.png) no-repeat;}
.ai_machine_tip1{ color: #fff; font-size: 18px; text-align: center; margin-top: 25px;}
.ai_machine_tip2{ color: #fff; font-size: 12px; text-align: center; margin-top: 15px;}
.ai_machine_match{ position: absolute; top: -17px; left: 50%; height: 34px; line-height: 34px; color: #fff; font-size: 12px;background-color: rgba(30, 149, 239, 0.4); border-radius: 17px; border: 1px solid #1e95ef; padding: 0 15px; white-space: nowrap; z-index: 11;}



.ai_machine_right{ position: relative; display: inline-block; width: 714px; height: 424px; padding-top: 85px; vertical-align: top; margin-left: 15px;}
.ai_machine_body{ position: absolute; left: 0; width: 655px; height: auto;}
.ai_match_tip1{ font-size: 26px; color: #fff; line-height: 46px;}
.ai_match_tip2{ font-size: 14px; color: #fff; line-height: 46px;}
.ai_match_tip3{ font-size: 12px; color: #fff; line-height: 46px;}

.work_type_cantianer { position: relative; width: 576px; height: 118px; border: 1px solid #014b85; background: rgba(1, 61, 108, 0.5); border-radius: 4px; font-size: 0; box-sizing: border-box;}
.work_type_item{position: absolute; left: -1px; top: -1px; width: 192px;height: 118px; border: 1px solid transparent; border-radius: 4px; box-sizing: border-box; cursor: pointer;}
.work_type_cover{ position: absolute; top: -1px; left: -1px; width: 192px;height: 118px; border-box; border-radius: 4px; background: rgba(40,157,244,0.4); border: 1px solid #2ca0f8; box-sizing: border-box; transition: left ease 0.5s;}
.work_type_item2{ left: 192px;}
.work_type_item3{ left: 384px;}
.work_type_item em{ display: block; width: 32px; height: 32px; margin: 30px auto 0; background: url(../images/icon.png) no-repeat;}
.work_type_item .work_type_icon1{ background-position: -36px 0;}
.work_type_item .work_type_icon2{ background-position: -68px 0;}
.work_type_item .work_type_icon3{ background-position: -100px 0;}
.work_type_item span{ display: block; font-size: 14px; color: #2da4fe; text-align: center; margin-top: 10px;}
.work_type_item.active span{ color: #fff;}

.ai_match_check{ position: absolute; right: 20px; top: 20px; padding: 0 15px; height: 32px; line-height: 32px; background: #013d6c; border-radius: 3px;}
.ai_match_check span{ font-size: 14px; color: #fff;}
.ai_match_check em{ font-size: 14px; color: #2da4fe;}
.ai_match_tip4{ font-size: 14px; line-height: 30px; color: #fff;}
.ai_match_tip4 em{ font-size: 38px; color: #fff600; margin: 0 5px;}
.ai_match_loading{ margin-top: 95px;}

.ai_match_tip5{ font-size: 12px; line-height: 46px; color: #fff;}

.work_htype_cantianer{ width: 625px; font-size: 0;}
.work_htype_item{ display: inline-block; width: 96px; height: 96px; background: rgba(1,61,108,0.5); border: 1px solid #014b85; box-sizing: border-box; border-radius: 4px; margin: 4px; vertical-align: top; cursor: pointer;}
.work_htype_item:hover,.work_htype_item.active{ background: rgba(40,157,244,0.4); border: 1px solid #2ca0f8;}
.work_htype_item em{ display: block; width: 40px; height: 32px; background: url(../images/type.png) no-repeat; margin: 18px auto 0;}
.work_htype_item span{ display: block; font-size: 14px; color: #2da4fe; text-align: center; margin-top: 10px;}
.work_htype_item.active span{ color: #fff;}
.work_htype_item .work_htype_icon1{ background-position: 0 0;}
.work_htype_item .work_htype_icon7{ background-position: -40px 0;}
.work_htype_item .work_htype_icon8{ background-position: -80px 0;}
.work_htype_item .work_htype_icon9{ background-position: -120px 0;}
.work_htype_item .work_htype_icon10{ background-position: -160px 0;}
.work_htype_item .work_htype_icon2{ background-position: -200px 0;}
.work_htype_item .work_htype_icon11{ background-position: -240px 0;}
.work_htype_item .work_htype_icon4{ background-position: -280px 0;}
.work_htype_item .work_htype_icon5{ background-position: -320px 0;}
.work_htype_item .work_htype_icon6{ background-position: -360px 0;}
.work_htype_item .work_htype_icon3{ background-position: -400px 0;}
.work_htype_item .work_htype_icon12{ background-position: -440px 0;}

.work_htype_item.active .work_htype_icon1{ background-position: 0 -32px;}
.work_htype_item.active .work_htype_icon7{ background-position: -40px -32px;}
.work_htype_item.active .work_htype_icon8{ background-position: -80px -32px;}
.work_htype_item.active .work_htype_icon9{ background-position: -120px -32px;}
.work_htype_item.active .work_htype_icon10{ background-position: -160px -32px;}
.work_htype_item.active .work_htype_icon2{ background-position: -200px -32px;}
.work_htype_item.active .work_htype_icon11{ background-position: -240px -32px;}
.work_htype_item.active .work_htype_icon4{ background-position: -280px -32px;}
.work_htype_item.active .work_htype_icon5{ background-position: -320px -32px;}
.work_htype_item.active .work_htype_icon6{ background-position: -360px -32px;}
.work_htype_item.active .work_htype_icon3{ background-position: -400px -32px;}
.work_htype_item.active .work_htype_icon12{ background-position: -440px -32px;}

.ai_match_radio_cantainer{ font-size: 0;}
.ai_match_radio_cantainer label{ position: relative; display: inline-block; width: 118px; height: 18px; margin-bottom: 10px; vertical-align: top;}
.ai_match_radio_cantainer label em{  display: inline-block; width: 18px; height: 18px; background: url(../images/icon.png) 0 -18px no-repeat;}
.ai_match_radio_cantainer label span{ font-size: 14px; line-height: 18px; color: #2da4fe; margin-left: 14px; vertical-align: top;}
.ai_match_radio_cantainer label.active em{ background: url(../images/icon.png) -18px -18px no-repeat;}
.ai_match_radio_cantainer label.active span{ color: #fff;}
.ai_match_radio_cantainer label em.checkbox{ background: url(../images/icon.png) 0 0 no-repeat;}
.ai_match_radio_cantainer label.active em.checkbox{ background: url(../images/icon.png) -18px 0 no-repeat;}

.ai_match_btn_cantainer{ margin-top: 30px;}
.ai_match_btn_cantainer span{ display: inline-block; width: 192px; height: 44px; line-height: 44px; text-align: center; font-size: 14px; border-radius: 3px; color: #fff; margin-right: 20px; cursor: pointer;}

.ai_match_radio_cantainer.auto label{ width: auto; margin-right: 30px; margin-bottom: 10px;}
.ai_golist{ display: block; width: 404px; height: 44px; line-height: 44px; font-size: 14px; border-radius: 3px; text-align: center; color: #fff; margin-top: 30px; cursor: pointer;}

.ai_match_bottom{ position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; line-height: 30px; font-size: 12px; background: #013d6c; opacity: 0.5; color: #067dd7; text-align: center;}


canvas{
	display:block;
	vertical-align:bottom;
}
#particles-js{
	width:100%;
	height:430px;
	opacity: 0.4;
}
.index_header_bottom{
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-left: -960px;
	width: 1920px;
	height: 305px;
	background: url(../images/index_header_bottom_bg.png) no-repeat center center;
}
.index_dh_01{
	width: 147px;
	height: 147px;
	background: url(../images/index_dh_01_bg.png) no-repeat;
	transform-origin:20px 127px;
	animation: index_animation_01 2s infinite;
	position: absolute;
	left: 79px;
	top: 137px;
}
.index_dh_02{
	width: 113px;
	height: 113px;
	background: url(../images/index_dh_02_bg.png) no-repeat;
	margin: 0 auto;
	transform-origin:97px 16px;
	animation: index_animation_02 2s infinite;
	position: absolute;
	left: 290px;
	top: 160px;
}
.index_dh_03{
	width: 81px;
	height: 108px;
	background: url(../images/index_dh_03_bg.png) no-repeat;
	margin: 0 auto;
	transform-origin:17px 91px;
	animation: index_animation_03 2s infinite;
	position: absolute;
	right: 321px;
	top: -18px;
}
.index_dh_04{
	width: 68px;
	height: 139px;
	background: url(../images/index_dh_04_bg.png) no-repeat;
	margin: 0 auto;
	transform-origin:17px 122px;
	animation: index_animation_04 2s infinite;
	position: absolute;
	right: 46px;
	top: -95px;
}
@keyframes index_animation_01{
	0%{transform: rotate(0deg);}
	50%{transform: rotate(15deg);}
	100%{transform: rotate(0deg);}
}
@keyframes index_animation_02{
	0%{transform: rotate(0deg);}
	50%{transform: rotate(15deg);}
	100%{transform: rotate(0deg);}
}
@keyframes index_animation_03{
	0%{transform: rotate(0deg);}
	50%{transform: rotate(15deg);}
	100%{transform: rotate(0deg);}
}
@keyframes index_animation_04{
	0%{transform: rotate(0deg);}
	50%{transform: rotate(-15deg);}
	100%{transform: rotate(0deg);}
}

.main_content_01{
	width: 716px;
}
.main_content_righttitle{
	width: 100%;
	height: 32px;
	
}
.main_content_righttitle span{
	display: inline-block;
	height: 32px;
	line-height: 32px;
	text-align: center;
	padding: 0 16px;
	background: #013d6c;
	border-radius: 3px;
	float: right;
	font-size: 14px;
	color: #fff;
}
.main_content_righttitle i{
	color: #2da4fe;
}
.main_content_01_title{
	width: 100%;
	height: 36px;
	line-height: 36px;
	font-size: 12px;
	color: #fff;
}
.main_content_01_input_01{
	width: 100%;
	height: 96px;
}
.main_content_01_input_01 textarea{
	width: 584px;
	height: 74px;
	resize: none;
	border: 1px #014b85 solid;
	border-radius: 3px;
	background: rgba(1, 61, 108, 0.5);
	font-size: 12px;
	line-height: 18px;
	color: #2da4fe;
	padding: 10px 15px;
	font-family: "microsoft yahei";
}
.main_content_01_input_01 textarea::-webkit-input-placeholder{
	color:#2da4fe;
}
.main_content_01_input_02{
	width: 100%;
	height: 40px;
	font-size: 0;
}
.main_content_01_input_02 input{
	line-height: 38px;
	font-size: 12px;
	padding: 0 9px;
}
.main_content_01_input_02 input::-webkit-input-placeholder{
	color:#2da4fe;
}
.tel_input_01{
	width: 282px;
	height: 38px;
	border: 1px #014b85 solid;
	border-radius: 3px;
	color: #2da4fe;
	background: rgba(1, 61, 108, 0.5);
}
.tel_input_02{
	width: 167px;
	height: 38px;
	border: 1px #014b85 solid;
	border-radius: 3px 0 0 3px;
	margin-left: 20px;
	color: #2da4fe;
	background: rgba(1, 61, 108, 0.5);
}
.tel_input_03{
	width: 106px;
	height: 40px;
	background: rgba(1, 61, 108, 0.8);
	border: 1px #014b85 solid;
	border-left: 0;
	color: #fff;
	cursor: pointer;
	border-radius:0 3px 3px 0;
}
.tel_input_03.disabled{ cursor: default;}
.main_content_01_btn{
	width: 100%;
	height: 44px;
	margin-top: 30px;
}
.main_content_01_btn a{
	width: 192px;
	height: 44px;
	display: block;
	border-radius: 3px;
	background: #26b210;
	color: #fff;
	font-size: 14px;
	text-align: center;
	line-height: 44px;
}
.main_content_02{
	width: 716px;
}
.main_content_02_title{
	width: 100%;
	height:90px;
	line-height: 45px;
	font-size: 26px;
	color: #fff;
}
.main_content_02_title span{
	color: #fff600;
}
.main_content_03{
	width: 716px;
	height: 459px;
	overflow: hidden;
	position: relative;
}
.main_content_03_text{
	margin-top:50px ;
	width: 335px;
	color: #fff;
	animation: main_content_03_text 0.4s linear 1s forwards;
	z-index: 4;
}
.main_content_03_text_title{
	font-size: 12px;
	color: #939393;
	line-height: 30px;
}
.main_content_03_text_intro{
	font-size: 16px;
	color: #fff;
	line-height: 40px;
	max-height: 80px;
	overflow: hidden;
}
.envelope{
	width: 396px;
	height: 406px;
	position: absolute;
	left: 0;
	top: 459px;
	animation: envelope 0.5s linear 1s forwards,envelope02 0.5s linear 2s forwards;
	z-index: 3;
	opacity: 0;
}
.mail{
	width: 394px;
	height: 265px;
	background: rgba(1, 61, 108, 0.8);
	border: 1px #014b85 solid;
	border-top: 0;
	border-radius: 0 0px 6px 6px;
	position: relative;
	overflow: hidden;
}
.mail_01{
	width: 100%;
	height: 256px;
	background: #01335a;
	transform: skewY(-23deg);
	position: absolute;
	left: 0;
	top: 100px;
	z-index: 1;
	border-top: 1px #013c6b solid;
	
}
.mail_02{
	width: 100%;
	height: 256px;
	background: #01335a;
	transform: skewY(23deg);
	position: absolute;
	left: 0;
	top: 100px;
	z-index: 0;
	border-top: 1px #013c6b solid;
	
}
.mail_title{
	width: 396px;
	height: 140px;
	position: relative;
	animation: mail 0.5s linear 1.5s forwards;
	transform-origin:bottom;
	z-index: 3;
}
.mail_title_intro{
	width: 0;
	height: 0;
	position: absolute;
	left: 0px;
	bottom: 20px;
	border-left: 197px solid transparent;
	border-right: 197px solid transparent;
	border-bottom: 120px solid rgba(1, 61, 108, 0.8);
	z-index: 1;
}
.mail_title_intro_02{
	width: 396px;
	height: 20px;
	background: rgba(1, 61, 108, 0.8);
	position: absolute;
	left: 0px;
	bottom: 0px;
}
@keyframes mail{
	from{transform: rotateX(0);}
	to{transform: rotateX(180deg);}
}
@keyframes envelope{
	from{top: 459px;opacity: 0;}
	to{top: 0;opacity: 1;}
}
@keyframes envelope02{
	from{top: 0;left: 0;opacity: 1;transform:scale(1);}
	to{top: -200px;left: 500px;opacity: 1;transform: scale(0);}
}
@keyframes main_content_03_text{
	from{opacity: 1;}
	to{opacity: 0}
}

.recheck{ position: absolute; top: 30px; left: 30px; font-size: 12px; color: #7c8ca5; cursor: pointer;}

.digits{
	display:inline-block;
	height:38px;
	margin-right: 3px;
}

.digits i{
	background:url(../images/number.png) no-repeat;
	display:inline-block;
	float:left;
	height:38px;
	width:18px;
}

.digits b{
	background:url(../images/number.png) no-repeat -5px -380px;
	display:inline-block;
	float:left;
	height:38px;
	width:10px;
}

.fade-enter-active,.fade-leave-active{
   transition: all .5s
}
.fade-enter,.fade-leave-active{
   opacity: 0;
}
/*.fade-enter{
   opacity: 0;
}*/

.fade-xq-enter-active,.fade-xq-leave-active{
   transition: all .5s
}
.fade-xq-enter,.fade-xq-leave-active{
   opacity: 0;
}
.machine_cover{ position: absolute; top: 0; left: 0; width: 454px; height: 430px; z-index: 11;}
.eye_cantainer{ width: 70px; height: 37px; margin: 56px auto 0; font-size: 0;}
.eye{ display: inline-block; width: 31px; height: 37px; margin: 0 2px; vertical-align: middle;}
.eye.eye_love{ background: url(../images/eye_love.png) no-repeat; background-size: cover; transform: scale(0); animation: love_eye 4s infinite;}
.eye.eye_line{ background: url(../images/eye_line.png) no-repeat; background-size: cover; animation: blink_eye 4s infinite alternate;}

@keyframes blink_eye
{
	0%,96%	{ transform:scaleY(1);}
	98%     { transform:scaleY(0.05);}
	100%	{ transform:scaleY(1);}
}
@keyframes love_eye
{
	0%      { transform:scale(0);}
	40%     { transform:scale(1);}
	47%     { transform:scale(1.1);}
	54%     { transform:scale(1);}
	60%     { transform:scale(1.1);}
	100%	{ transform:scaleY(1);}
}